<template>
  <div>
    <el-dialog
      :title="dialog.title"
      :show="show"
      :width="dialog.width"
      :visible.sync="visible"
      :before-close="handleClose"
    >
      <div class="formDuv">
        <div class="tablebox">
          <el-table
            border
            :data="WaretableDatass"
            ref="handSelectTest_multipleTable"
            height="300"
          >
            <el-table-column
              v-for="wareHead in tablehader"
              :type="wareHead.type"
              :key="wareHead.prop"
              :label="wareHead.label"
              :fixed="wareHead.fixed"
              :width="wareHead.width"
              :min-width="wareHead.minWidth"
              :prop="wareHead.prop"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagebox">
          <el-row>
            <el-col :span="24">
              <el-pagination
                v-if="WaretableDatass.length > 0"
                @size-change="handleSizeChanges"
                @current-change="handleindexChanges"
                :current-page.sync="paginations.page"
                :page-sizes="paginations.page_sizes"
                :page-size="paginations.pageSize"
                :layout="paginations.layout"
                :total="paginations.total"
              ></el-pagination>
              <!-- <div class="surepagination" @click="ArePagesure">
                <span>确定</span>
            </div>-->
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest } from "@/api/request.js";
import { worker } from "@/api/config.js";
export default {
  props: {
    dialog: {
      type: Object,
      defalut: {},
    },
    show: {
      type: Boolean,
      default: false,
    },
    WaretableDatas: {
      type: Array,
      default: [],
    },
  },
  watch: {
    show() {
      this.visible = this.show;
      this.form = {
        content: null,
        endTime: null,
        star: 0,
      };
    },
    "WaretableDatas":{
      //深度监听，可监听到对象、数组的变化
      handler(newVal, oldVal) {
        this.WaretableDatass= newVal;
         this.paginations.total=newVal.length;
      },
      deep: true,
    },
  },
  data() {
    return {
      WaretableDatass: [],
      paginations: {
        page: 1, //当前位于那页面
        total: 0, //总数
        pageSize: 10, //一页显示多少条
        page_sizes: [10, 20, 30, 40], //每页显示多少条,
        layout: "total, sizes, prev, pager, next, jumper", //翻页属性
        type:2
      },
      colors: ["#99A9BF", "#fb7d7d", "#ec1010"],
      visible: this.show,
      form: {
        content: null,
        endTime: null,
        star: 0,
      },
      //规则
      tablehader: [
        {
          label: "内容",
          prop: "content",
          minWidth: 200,
        },
        {
          label: "星星",
          prop: "star",
          minWidth: 100,
        },
        {
          label: "结束时间",
          prop: "endTime",
             minWidth: 200,
        }, 
        {
          label: "创建时间",
          prop: "createTime",
          minWidth: 200,
        },
      ], //表格数据 //表格数据
      stockInOutTypeDescdata: [
        {
          value: "入库",
          key: 1,
        },
        {
          value: "出库",
          key: 2,
        },
      ],
      minWidth: 0,
    };
  },
  name: "Adialog",
  methods: {
         //分页选择
    handleSizeChanges(val) {
      this.paginations.pageSize = val;
      this.paginations.page = 1;
      this.Areatablesss();
    },
    handleindexChanges(val) {
      this.paginations.page = val;
      this.Areatablesss();
    },
    handleClose(done) {
      this.visible = false;
      this.dialog.shows();
    },
    //初始化数据
    Areatablesss() {
      var self = this;
        getRequest({
        url: worker.queryContentList,
        data: {page:self.paginations.page,pageSize:self.paginations.pageSize,type:2},
        successs: function (res) {
          if (res.list.length == 0) return self.$message.error("没有更多数据");
                self.WaretableDatass=res.list;
                self.paginations.total=res.list.length;
        },
      });
    },
    //设置宽度最小值
    setMinWidthEmpty(val) {
      this.minWidth = val.srcElement.clientWidth;
      //无数据情况下
      var mpty = document.getElementsByClassName("el-select-dropdown__empty");
      if (mpty.length > 0) {
        mpty[0].style["min-width"] = val.srcElement.clientWidth + 2 + "px";
      }
    },
    submitForm(fromname) {
      var self = this;
      this.$refs[fromname].validate((v) => {
        if (v) {
          postRequest({
            url: worker.insertContent,
            data: self.form,
            successs: function (res) {
              (self.form = {
                content: null,
                endTime: null,
                star: 0,
              }),
                self.$message({
                  message: "成功",
                  type: "success",
                });

              self.visible = false;
              self.dialog.fn();
            },
          });
        }
      });
    },
    resetForm(fromname) {
      (this.form = {
        content: null,
        endTime: null,
        star: 0,
      }),
        (this.visible = false);
      this.dialog.shows();
    },
  },
};
</script>
<style lang='less' scoped >
.el-form-endTime {
  width: 40%;
}
</style>